<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>子组件向父组件传递数据</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id="app">
		<!-- @后面的fn表示要监听的函数，等号里面的表示要执行的函数 -->
		<mybtn v-on:click-count-fn="allClickCountFn()" ref="mybtn"></mybtn>
		<mybtn v-on:click-count-fn="allClickCountFn()"></mybtn>
		<mybtn v-on:click-count-fn="allClickCountFn()"></mybtn>
		<mybtn v-on:click-count-fn="allClickCountFn()"></mybtn>
		<p>你总共点击的次数是：{{allClickCount}}</p>

		<div>
			<button @click="callChildMethod()">
				父组件中调用子组件中的方法
			</button>
			<!-- ref 保存这个组件中子组件的实列 -->
			<childcomponent ref="child"></childcomponent>
		</div>
	</div>


	<template class="mybtn">
		<button @click="clickCountFn()">你点击了{{clickCount}}次</button>
	</template>
	<script>
		Vue.component("mybtn", {
			template: document.getElementsByClassName('mybtn')[0],
			// 在这里不能用 template: ".mybtn"，因为className不唯一
			data() {
				return {
					clickCount: 0
				}
			},
			methods: {
				clickCountFn() {
					this.clickCount += 1;
					// 在这里告诉父组件， 我已经调用了，发送消息给父组件，好让父组件监听,
					// 第一个参数告诉父组件我要向你传递消息的那个函数，而父组件接收
					this.$emit("click-count-fn");
				}
			}
		});
		Vue.component("childcomponent", {
			template: `<div>父组件中调用子组件中的方法 {{title}} </div>`,
			data() {
				return {}
			},
			methods: {
				childMethod() {
					alert("子组件被调用");
				}
			}
		})
		new Vue({
			el: "#app",
			data: {
				allClickCount: 0
			},
			methods: {
				allClickCountFn() {
					this.allClickCount += 1;
				},
				callChildMethod() {
					console.log(this);
					console.log(this.$refs);
					this.$refs.child.childMethod();
				}
			}
		});
	</script>
</body>

</html>